<template>
	<view class="wrap">
		<view class="key-input">
			<view class="title">输入验证码</view>
			<view class="tips">验证码已发送至 +{{processPhone(phone)}} </view>
			<u-message-input :focus="true" :value="code" @finish="finish" mode="bottomLine"
				:maxlength="maxlength"></u-message-input>
				
			<button v-show="isLogin" @click="doLogin" style="margin-top: 20px;background-color: #f9ae3d;color: #fff;"
				class="getCaptcha">手机号登录</button>
			<text :class="{ error: error }">验证码错误，请重新输入</text>
			<view class="captcha">
				<text :class="{ noCaptcha: show }" @click="noCaptcha">收不到验证码点这里</text>
				<text :class="{ regain: !show }">{{second}}秒后重新获取验证码</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getPhoneCode
	} from "@/api/common/index.js";
	import {
		login
	} from "@/api/login/index.js";

	const maxlength = ref(4);
	const code = ref('');
	const second = ref(120);
	const show = ref(false);
	const error = ref(false);
	const isLogin = ref(false);
	const phone = ref('');
	onLoad((options) => {
		phone.value = options.phone;
		doSetInterval();
	})

	//验证码倒计时
	const doSetInterval = () => {
		let interval = setInterval(() => {
			second.value--;
			if (second.value <= 0) {
				show.value = true;
				if (code.value.lenth != 4) {
					error.value = true;
				}
				clearInterval(interval);
			}
		}, 1000)
	}

	//手机号脱敏处理
	function processPhone(phone) {
		return `${phone.slice(0, 3)}****${phone.slice(7)}`;
	}

	//验证码重新请求处理方法
	const noCaptcha = () => {
		uni.showActionSheet({
			itemList: ['重新获取验证码'],
			success: function(res) {
				//重新请求验证码发送
				getPhoneCode(phone.value).then((res) => {
					if (res.code === 200) {
						second.value = 120;
						doSetInterval();
						show.value = false;
						error.value = false;
						uni.showToast({
							title: "验证码发送成功！",
						})
					}
				})
			},
			fail: function(res) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		});
	}

	// 验证码验证方法
	const finish = (value) => {
		//展示登录按钮
		isLogin.value = true;
		code.value = value;
	}
	
	//开始登录
	const userVo = ref({
		phone: null,
		code: null
	})
	const doLogin = () => {
		userVo.value.phone = phone.value;
		userVo.value.code = code.value;
		login(userVo.value).then((res) => {
			if(res.code === 200){
				console.log(res.data);
				//本地存储用户token
				uni.setStorageSync("token",res.data.authorization);
				//本地存储用户信息
				uni.setStorageSync("user",res.data.user);
				uni.showToast({
					title: "登录成功！"
				});
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/index"
					})
				},1000)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 80rpx;
	}

	.box {
		margin: 30rpx 0;
		font-size: 30rpx;
		color: 555;
	}

	.key-input {
		padding: 30rpx 0;

		text {
			display: none;
		}

		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}

	.title {
		font-size: 50rpx;
		color: #333;
	}

	.key-input .tips {
		font-size: 30rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.captcha {
		color: $u-warning;
		font-size: 30rpx;
		margin-top: 40rpx;

		.noCaptcha {
			display: block;
		}

		.regain {
			display: block;
		}
	}
</style>